<template>
  <div class="wrapper">
    <div class="title">
      <p>筛选{{title}}类别</p>
      <el-checkbox v-model="checked" @change="checkedHandle">全选</el-checkbox>
    </div>
    <!-- <el-input placeholder="请输入内容" v-model="searchKey" clearable @keyup.enter.native="searchHandle"> -->
    <el-input placeholder="请输入内容" v-model="searchKey" clearable>
      <i slot="prefix" class="el-input__icon el-icon-search" @click="searchHandle"></i>
    </el-input>
    <div class="listWrapper">
      <ul class="list" v-if="title === '实体'">
        <template v-if="$store.state.knowledgeMap.hasGraph">
          <li :class="i.selected ? 'selected' : ''" v-for="i in firstCateory" :key="i.ontologyId"
            @click="clickItem($event,i)">{{i.ontologyName}}</li>
        </template>
        <li :class="item.selected ? 'selected' : ''" v-for="item in $store.state.knowledgeMap.entityTypeList.list"
          :key="item.ontologyId" @click="clickItem($event,item)">
          {{item.ontologyName}}</li>
      </ul>
      <!-- <ul class="list" v-if="title === '实体'">
        <li :class="item.selected ? 'selected' : ''" v-for="item in finalCate" :key="item.ontologyId"
          @click="clickItem($event,item)">
          {{item.ontologyName}}</li>
      </ul> -->

      <ul class="list" v-else>
        <li :class="item.selected ? 'selected' : ''" v-for="item in $store.state.knowledgeMap.relationTypeList.list"
          :key="item.relationId" @click="clickItem($event,item)">
          {{item.relationName}}</li>
      </ul>
    </div>

    <!-- <el-pagination layout="prev, pager, next" :page-size="12" :total="dataList.total"
      @current-change="handleCurrentChange">
    </el-pagination> -->
  </div>
</template>

<script>
//   import {
//     filterEntitytype,
//     filterRelationtype
//   } from "@/api/atlas-analyse.js"
  export default {
    name: "sx-category",
    components: {},
    props: {
      title: {
        type: String,
        default: ""
      },
      dataList: {
        type: Object,
        default: () => {}
      },
    },
    data() {
      return {
        searchKey: "",
        checked: false,
        firstCateory: [{
            ontologyName: "陪测软件",
            ontologyId: "0",
            selected: false,
          },
          {
            ontologyName: "陪测硬件",
            ontologyId: "1",
            selected: false,
          },
          {
            ontologyName: "硬件测试工具",
            ontologyId: "2",
            selected: false,
          },
          {
            ontologyName: "软件测试工具",
            ontologyId: "3",
            selected: false,
          },
          {
            ontologyName: "测试项",
            ontologyId: "4",
            selected: false,
          },
          {
            ontologyName: "测试用例",
            ontologyId: "5",
            selected: false,
          },
        ]
      }
    },
    mounted() {

    },
    computed: {
      // finalCate() {
      //   let validate = ["陪测软件", "陪测硬件", "硬件测试工具", ];
      //   if (this.$store.state.entityTypeList && this.$store.state.entityTypeList.list) {
      //     return [...this.firstCateory, ...this.$store.state.entityTypeList.list];
      //     // let arr = this.$store.state.entityTypeList.list;
      //     // arr.forEach((item,index) => {
      //     //   item
      //     // });
      //   }
      // },
    },
    methods: {
      clickItem(e, item) {
        if (this.title === "实体") {
          item.selected = !item.selected;
          if (this.checked) {
            // 全选状态下, 不选中哪些条件
            if (item.selected) {
              this.$store.commit("knowledgeMap/change_selectedEntityArr", {
                type: 1,
                change: "add",
                text: item.ontologyName
              });
            } else {
              this.$store.commit("knowledgeMap/change_selectedEntityArr", {
                type: 1,
                change: "del",
                text: item.ontologyName
              });
            }
          } else {
            if (item.selected) {
              this.$store.commit("knowledgeMap/change_selectedEntityArr", {
                type: 0,
                change: "add",
                text: item.ontologyName
              });
            } else {
              this.$store.commit("knowledgeMap/change_selectedEntityArr", {
                type: 0,
                change: "del",
                text: item.ontologyName
              });
            }
          }
        } else {
          item.selected = !item.selected;
          if (this.checked) {
            // 全选状态下, 不选中哪些条件
            if (item.selected) {
              this.$store.commit("knowledgeMap/change_selectedRelationArr", {
                type: 1,
                change: "add",
                text: item.relationName
              });
            } else {
              this.$store.commit("knowledgeMap/change_selectedRelationArr", {
                type: 1,
                change: "del",
                text: item.relationName
              });
            }
          } else {
            if (item.selected) {
              this.$store.commit("knowledgeMap/change_selectedRelationArr", {
                type: 0,
                change: "add",
                text: item.relationName
              });
            } else {
              this.$store.commit("knowledgeMap/change_selectedRelationArr", {
                type: 0,
                change: "del",
                text: item.relationName
              });
            }
          }
        }
      },

      checkedHandle() {
        if (this.title === "实体") {
          if (this.checked) {
            const {
              list
            } = this.$store.state.knowledgeMap.entityTypeList;
            list.forEach(item => {
              item.selected = true;
            });
            this.$store.commit("knowledgeMap/change_selectedEntityArr", {
              type: 1
            });
          } else {
            const {
              list
            } = this.$store.state.knowledgeMap.entityTypeList;
            list.forEach(item => {
              item.selected = false;
            });
            this.$store.commit("knowledgeMap/change_selectedEntityArr", {
              type: 0
            });
          }
        } else {
          if (this.checked) {
            const {
              list
            } = this.$store.state.knowledgeMap.relationTypeList;
            list.forEach(item => {
              item.selected = true;
            });
            this.$store.commit("knowledgeMap/change_selectedRelationArr", {
              type: 1
            });
          } else {
            const {
              list
            } = this.$store.state.knowledgeMap.relationTypeList;
            list.forEach(item => {
              item.selected = false;
            });
            this.$store.commit("knowledgeMap/change_selectedRelationArr", {
              type: 0
            });
          }
        }
      },

      // 搜素方法
      searchHandle() {
        // this.handleCurrentChange(null);
        this.handleCurrentChange();
      },

      // 当前跳转页
      async handleCurrentChange(val) {
        if (this.title === "实体") {
          const res = await filterEntitytype({
            project_id: this.$store.state.knowledgeMap.projectId,
            keywords: this.searchKey,
            // page_index: val,
            // page_size: 12
          });
          this.$store.commit("knowledgeMap/change_entityTypeList", res.data.data);
        } else {
          const res = await filterRelationtype({
            project_id: this.$store.state.knowledgeMap.projectId,
            keywords: this.searchKey,
            // page_index: val,
            // page_size: 12
          });
          this.$store.commit("knowledgeMap/change_relationTypeList", res.data.data);
        }
      }
    },
  }
</script>

<style lang="scss" scoped>
  // 多项选择器的样式
    /deep/ .el-checkbox {
        .el-checkbox__label {
            height: 19px;
            font-size: 14px;
            color: #333333;
            line-height: 19px;
        }
    }

/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #4B71EB;
}
  .wrapper {
    .title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 16px;

      p {
        height: 21px;
        font-size: 16px;
        color: #333333;
        line-height: 21px;
      }
    }

    /deep/ .el-input .el-input--prefix {
      width: 392px;
      height: 32px;
      background: #F3F4F8;
      border-radius: 2px;
    }

    /deep/ .el-input__inner {
      outline: none;
      border-radius: 2px;
      height: 32px;
      background-color: #F3F4F8;

      &:focus {
        border-color: #4B71EB;
      }
    }

    /deep/ .el-input__icon {
      line-height: 32px;

      &:hover {
        cursor: pointer;
      }
    }

    .listWrapper {
      margin-top: 16px;
      max-height: 180px;
      // max-height: 130px;
      overflow: hidden;
      overflow-y: auto;

      .list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        // margin-top: 32px;
        font-size: 14px;

        li {
          // width: 82px;
          min-width: 50px;
          padding: 0 16px;
          height: 32px;
          background: #F3F4F8;
          border-radius: 16px;
          margin-bottom: 16px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;

          &.selected {
            border: 1px solid #3A58B9;
          }
        }
      }
    }
  }
</style>